<!--
 * @Descripttion: 
 * @version: 
 * @Author: hhy
 * @Date: 2021-01-15 16:23:06
 * @LastEditors: hhy
 * @LastEditTime: 2021-05-17 11:44:25
 * @FilePath: \votemp-user-pc\src\components\common\h-dropdown.vue
-->

<template>
  <el-dropdown
    class="h-dropdown"
    trigger="click"
    placement="bottom"
    @command="onCommand"
    @visible-change="changeCommand"
  >
    <span class="el-dropdown-link">
      <i v-if="dot" class="el-icon-more" />
      <template v-else>
        <slot>操作</slot>
        <i
          class="el-icon-arrow-down el-icon--right "
          :class="{
            'el-icon--rotate': rotate,
          }"
        />
      </template>
    </span>
    <template #dropdown>
      <el-dropdown-menu :class="vclass">
        <slot name="dropdown">
          <el-dropdown-item
            v-for="i in dropdown"
            :key="i.command"
            :command="i.command"
            :divided="i.divided"
          >
            <router-link v-if="i.to" :to="i.to" tag="div">{{
              i.name
            }}</router-link>
            <div v-else>{{ i.name }}</div>
          </el-dropdown-item>
        </slot>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script lang="ts">
import { defineComponent, toRefs, reactive } from "vue";
export default defineComponent({
  name: "h-dropdown",
  emits: ["command"],
  props: {
    dropdown: {
      type: Array,
      default() {
        return [
          {
            command: "edit",
            name: "编辑",
          },
          {
            command: "del",
            name: "删除",
          },
        ];
      },
    },
    vclass: String,
    dot: Boolean,
    i: Object,
  },
  setup(props: any, context: any) {
    const state: any = reactive({
      rotate: false,
    });
    const onCommand = (op: any) => {
      context.emit("command", { op, i: props.i });
    };
    const changeCommand = (type) => {
      state.rotate = type;
    };
    return {
      ...toRefs(state),
      onCommand,
      changeCommand,
    };
  },
});
</script>

<style lang="scss" scoped>
.el-dropdown-menu__item {
  line-height: 30px;
}
.h-dropdown {
  .el-icon--rotate {
    transform: rotate(-180deg);
  }
  .el-dropdown-link {
    cursor: pointer;
    color: $c9;

    &:hover {
      color: common-theme-color;
    }
    .el-icon-arrow-down {
      margin-left: 0;
      transition: 0.3s;
    }
  }
}
</style>
